'use client';

import { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Quote,
  Star,
  ChevronLeft,
  ChevronRight,
  Building2,
  Award,
  TrendingUp,
  Shield,
  Zap,
} from 'lucide-react';

/**
 * 客户证言数据
 */
const testimonials = [
  {
    id: 1,
    quote:
      'CActor框架帮助我们实现了前所未有的交易性能。系统上线后，我们的交易延迟降低了85%，处理能力提升了300%，这直接转化为了显著的业务收益。更重要的是，系统的稳定性让我们在激烈的市场竞争中获得了巨大优势。',
    author: {
      name: '张总监',
      title: '技术总监',
      company: '某国际知名银行',
      avatar: '👨‍💼',
      industry: '银行业',
    },
    metrics: [
      { label: '延迟降低', value: '85%', icon: Zap },
      { label: '性能提升', value: '300%', icon: TrendingUp },
      { label: '稳定性', value: '99.99%', icon: Shield },
    ],
    rating: 5,
    featured: true,
  },
  {
    id: 2,
    quote:
      'CActor框架帮助我们构建了业界领先的支付系统。系统上线后，我们的日处理能力从200万笔提升到1000万+笔，响应时间降低了80%。更重要的是，系统的稳定性和可扩展性为我们的业务快速发展提供了强有力的技术保障。',
    author: {
      name: '李总监',
      title: '技术总监',
      company: '某领先金融科技公司',
      avatar: '👩‍💻',
      industry: '金融科技',
    },
    metrics: [
      { label: '处理能力', value: '400%', icon: TrendingUp },
      { label: '响应时间', value: '80%', icon: Zap },
      { label: '可用性', value: '99.95%', icon: Shield },
    ],
    rating: 5,
    featured: true,
  },
  {
    id: 3,
    quote:
      'CActor框架帮助我们构建了业界领先的智能风控系统。AI算法的准确率达到95%+，处理速度提升了200%，误报率降低了60%。更重要的是，系统的实时学习能力让我们能够快速应对新的风险挑战。',
    author: {
      name: '王总监',
      title: '风控总监',
      company: '某头部证券公司',
      avatar: '👨‍🔬',
      industry: '证券业',
    },
    metrics: [
      { label: '准确率', value: '95%+', icon: Award },
      { label: '处理速度', value: '200%', icon: Zap },
      { label: '误报降低', value: '60%', icon: Shield },
    ],
    rating: 5,
    featured: true,
  },
  {
    id: 4,
    quote:
      '从传统架构迁移到CActor框架是我们做过的最正确的技术决策。不仅系统性能得到了显著提升，开发效率也提高了40%。团队现在能够更快地响应业务需求，交付高质量的解决方案。',
    author: {
      name: '陈架构师',
      title: '首席架构师',
      company: '某大型保险公司',
      avatar: '👨‍💻',
      industry: '保险业',
    },
    metrics: [
      { label: '开发效率', value: '40%', icon: TrendingUp },
      { label: '系统性能', value: '150%', icon: Zap },
      { label: '交付速度', value: '60%', icon: Award },
    ],
    rating: 5,
    featured: false,
  },
  {
    id: 5,
    quote:
      'CActor框架的Actor模型让我们的分布式系统设计变得更加清晰和可维护。特别是在处理复杂的业务逻辑时，Actor的封装性和消息传递机制大大简化了系统复杂度。',
    author: {
      name: '刘工程师',
      title: '高级工程师',
      company: '某互联网金融平台',
      avatar: '👩‍🔧',
      industry: '互联网金融',
    },
    metrics: [
      { label: '代码质量', value: '70%', icon: Award },
      { label: '维护成本', value: '-50%', icon: Shield },
      { label: '开发速度', value: '80%', icon: TrendingUp },
    ],
    rating: 5,
    featured: false,
  },
  {
    id: 6,
    quote:
      'CActor框架的技术支持团队非常专业，从项目启动到上线运行，他们提供了全程的技术指导和支持。这种服务质量让我们对技术选型更加有信心。',
    author: {
      name: '赵经理',
      title: '项目经理',
      company: '某区域性银行',
      avatar: '👨‍💼',
      industry: '银行业',
    },
    metrics: [
      { label: '项目成功率', value: '100%', icon: Award },
      { label: '交付准时率', value: '95%', icon: TrendingUp },
      { label: '客户满意度', value: '98%', icon: Shield },
    ],
    rating: 5,
    featured: false,
  },
];

/**
 * 行业专家推荐
 */
const expertRecommendations = [
  {
    id: 1,
    quote:
      'CActor框架代表了Actor模型技术的最新发展方向，其在金融领域的成功应用证明了这一技术栈的巨大潜力。',
    expert: {
      name: 'Dr. Michael Zhang',
      title: '分布式系统专家',
      organization: '清华大学计算机系',
      avatar: '👨‍🎓',
      credentials: ['IEEE Fellow', '分布式系统权威'],
    },
    rating: 5,
  },
  {
    id: 2,
    quote:
      '在我20年的金融科技从业经验中，很少看到像CActor这样能够同时兼顾性能、稳定性和开发效率的框架。',
    expert: {
      name: 'Sarah Johnson',
      title: '金融科技顾问',
      organization: 'FinTech Innovation Lab',
      avatar: '👩‍💼',
      credentials: ['金融科技专家', '技术顾问'],
    },
    rating: 5,
  },
  {
    id: 3,
    quote:
      'CActor框架的设计理念和实现质量都达到了工业级标准，是企业级应用的理想选择。',
    expert: {
      name: 'Prof. David Lee',
      title: '软件工程教授',
      organization: 'MIT计算机科学与人工智能实验室',
      avatar: '👨‍🏫',
      credentials: ['软件架构专家', 'ACM Fellow'],
    },
    rating: 5,
  },
];

/**
 * 媒体报道和奖项
 */
const mediaAndAwards = [
  {
    type: 'award',
    title: '2024年度最佳开源框架奖',
    organization: '中国开源软件推进联盟',
    date: '2024-01-15',
    description: '表彰CActor框架在推动开源技术发展方面的杰出贡献',
  },
  {
    type: 'media',
    title: '"CActor：重新定义Actor模型框架"',
    organization: 'InfoQ中国',
    date: '2024-01-10',
    description: '深度报道CActor框架的技术创新和行业应用',
  },
  {
    type: 'award',
    title: '金融科技创新技术奖',
    organization: '中国金融科技产业联盟',
    date: '2023-12-20',
    description: '认可CActor在金融科技领域的技术创新和应用价值',
  },
  {
    type: 'media',
    title: '"下一代分布式系统的技术选择"',
    organization: '架构师杂志',
    date: '2023-12-15',
    description: '专业技术媒体对CActor框架的深度技术分析',
  },
];

interface TestimonialsProps {
  showAll?: boolean;
  maxItems?: number;
}

/**
 * 客户证言组件
 */
export function Testimonials({
  showAll = false,
  maxItems = 3,
}: TestimonialsProps) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const displayTestimonials = showAll
    ? testimonials
    : testimonials.slice(0, maxItems);
  const currentTestimonial = displayTestimonials[currentIndex];

  /**
   * 切换到下一个证言
   */
  const nextTestimonial = () => {
    setCurrentIndex(prev => (prev + 1) % displayTestimonials.length);
  };

  /**
   * 切换到上一个证言
   */
  const prevTestimonial = () => {
    setCurrentIndex(
      prev =>
        (prev - 1 + displayTestimonials.length) % displayTestimonials.length
    );
  };

  /**
   * 渲染星级评分
   */
  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <Star
        key={i}
        className={`w-4 h-4 ${
          i < rating ? 'text-yellow-400 fill-current' : 'text-gray-300'
        }`}
      />
    ));
  };

  if (!showAll) {
    // 轮播模式 - 用于首页等场景
    return (
      <div className="relative">
        <Card className="bg-gradient-to-br from-blue-50 to-cyan-50 border-0 shadow-xl">
          <CardContent className="p-8 md:p-12">
            <div className="text-center mb-8">
              <Quote className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="flex justify-center mb-4">
                {renderStars(currentTestimonial.rating)}
              </div>
            </div>

            <blockquote className="text-lg md:text-xl text-gray-700 leading-relaxed mb-8 text-center max-w-4xl mx-auto">
              &ldquo;{currentTestimonial.quote}&rdquo;
            </blockquote>

            <div className="flex flex-col md:flex-row items-center justify-between">
              <div className="flex items-center mb-6 md:mb-0">
                <div className="text-4xl mr-4">
                  {currentTestimonial.author.avatar}
                </div>
                <div>
                  <div className="font-semibold text-gray-900 text-lg">
                    {currentTestimonial.author.name}
                  </div>
                  <div className="text-gray-600">
                    {currentTestimonial.author.title}
                  </div>
                  <div className="text-gray-500 text-sm">
                    {currentTestimonial.author.company}
                  </div>
                </div>
              </div>

              <div className="flex items-center space-x-6">
                {currentTestimonial.metrics.map((metric, index) => {
                  const Icon = metric.icon;
                  return (
                    <div key={index} className="text-center">
                      <Icon className="w-6 h-6 text-blue-600 mx-auto mb-1" />
                      <div className="font-bold text-blue-600 text-lg">
                        {metric.value}
                      </div>
                      <div className="text-xs text-gray-600">
                        {metric.label}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 导航按钮 */}
        <div className="flex justify-center mt-6 space-x-4">
          <Button
            variant="outline"
            size="sm"
            onClick={prevTestimonial}
            className="rounded-full w-10 h-10 p-0"
          >
            <ChevronLeft className="w-4 h-4" />
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={nextTestimonial}
            className="rounded-full w-10 h-10 p-0"
          >
            <ChevronRight className="w-4 h-4" />
          </Button>
        </div>

        {/* 指示器 */}
        <div className="flex justify-center mt-4 space-x-2">
          {displayTestimonials.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentIndex(index)}
              className={`w-2 h-2 rounded-full transition-colors ${
                index === currentIndex ? 'bg-blue-600' : 'bg-gray-300'
              }`}
            />
          ))}
        </div>
      </div>
    );
  }

  // 完整展示模式 - 用于专门的证言页面
  return (
    <div className="space-y-12">
      {/* 客户证言网格 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {testimonials.map(testimonial => (
          <Card
            key={testimonial.id}
            className="hover:shadow-lg transition-shadow"
          >
            <CardContent className="p-6">
              <div className="flex justify-between items-start mb-4">
                <div className="flex">{renderStars(testimonial.rating)}</div>
                {testimonial.featured && (
                  <Badge className="bg-blue-100 text-blue-700">精选推荐</Badge>
                )}
              </div>

              <blockquote className="text-gray-700 mb-6 line-clamp-4">
                &ldquo;{testimonial.quote}&rdquo;
              </blockquote>

              <div className="flex items-center mb-4">
                <div className="text-2xl mr-3">{testimonial.author.avatar}</div>
                <div>
                  <div className="font-semibold text-gray-900">
                    {testimonial.author.name}
                  </div>
                  <div className="text-sm text-gray-600">
                    {testimonial.author.title}
                  </div>
                  <div className="text-sm text-gray-500">
                    {testimonial.author.company}
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-3 gap-2">
                {testimonial.metrics.map((metric, index) => {
                  const Icon = metric.icon;
                  return (
                    <div
                      key={index}
                      className="text-center p-2 bg-gray-50 rounded"
                    >
                      <Icon className="w-4 h-4 text-blue-600 mx-auto mb-1" />
                      <div className="font-semibold text-blue-600 text-sm">
                        {metric.value}
                      </div>
                      <div className="text-xs text-gray-600">
                        {metric.label}
                      </div>
                    </div>
                  );
                })}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 行业专家推荐 */}
      <div>
        <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
          行业专家推荐
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {expertRecommendations.map(recommendation => (
            <Card
              key={recommendation.id}
              className="bg-gradient-to-br from-purple-50 to-pink-50"
            >
              <CardContent className="p-6 text-center">
                <div className="text-4xl mb-4">
                  {recommendation.expert.avatar}
                </div>
                <div className="flex justify-center mb-4">
                  {renderStars(recommendation.rating)}
                </div>
                <blockquote className="text-gray-700 mb-4 italic">
                  &ldquo;{recommendation.quote}&rdquo;
                </blockquote>
                <div className="font-semibold text-gray-900">
                  {recommendation.expert.name}
                </div>
                <div className="text-sm text-gray-600 mb-2">
                  {recommendation.expert.title}
                </div>
                <div className="text-sm text-gray-500 mb-3">
                  {recommendation.expert.organization}
                </div>
                <div className="flex flex-wrap gap-1 justify-center">
                  {recommendation.expert.credentials.map(
                    (credential, index) => (
                      <Badge key={index} variant="outline" className="text-xs">
                        {credential}
                      </Badge>
                    )
                  )}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* 媒体报道和奖项 */}
      <div>
        <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
          媒体报道与奖项
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {mediaAndAwards.map((item, index) => (
            <Card key={index} className="hover:shadow-md transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-start">
                  <div
                    className={`w-12 h-12 rounded-full flex items-center justify-center mr-4 ${
                      item.type === 'award' ? 'bg-yellow-100' : 'bg-blue-100'
                    }`}
                  >
                    {item.type === 'award' ? (
                      <Award className="w-6 h-6 text-yellow-600" />
                    ) : (
                      <Building2 className="w-6 h-6 text-blue-600" />
                    )}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between mb-2">
                      <Badge
                        variant={
                          item.type === 'award' ? 'default' : 'secondary'
                        }
                      >
                        {item.type === 'award' ? '奖项' : '媒体报道'}
                      </Badge>
                      <span className="text-sm text-gray-500">{item.date}</span>
                    </div>
                    <h4 className="font-semibold text-gray-900 mb-2">
                      {item.title}
                    </h4>
                    <p className="text-sm text-gray-600 mb-2">
                      {item.organization}
                    </p>
                    <p className="text-sm text-gray-500">{item.description}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Testimonials;
